<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Tabs name="main_tabs_child" size="small">
          <TabPane tab="main_tabs_child" label="散点配置">
            <Alert show-icon style="text-align: justify; padding-right: 10px;">
              散点配置中，所有的配置在设计器中均不是实时生效，调整之后，请保存页面并刷新设计器或打开预览界面查看调整后的效果
            </Alert>
            <Form :label-width="120">
              <FormItem label="散点类型">
                <Select :transfer="true" size="small" v-model="circleLayerOption.type">
                  <Option v-for="item in circleLayerTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
              <FormItem label="颜色">
                <PnColorPicker size="small" v-model="circleLayerOption.color" alpha recommend/>
              </FormItem>
              <FormItem label="圆点半径">
                <Tooltip content="带扩散效果时指的是中心圆的半径大小" :max-width="200" placement="left">
                  <InputNumber size="small" :max="1000" :min="0" v-model="circleLayerOption.size"></InputNumber>
                </Tooltip>
              </FormItem>
              <FormItem label="扩散效果半径">
                <Tooltip content="设置值时需要比size的值大，否则看不出扩散效果" :max-width="200" placement="left">
                  <InputNumber size="small" :max="1000" :min="0" v-model="circleLayerOption.radius"></InputNumber>
                </Tooltip>
              </FormItem>
              <FormItem label="扩散效果动画周期">
                <Tooltip content="带波纹扩散效果的圆类型时，周期影响的是波纹的扩散速度，越小越快;带冒泡扩散效果的圆类型时，周期是扩散开始到最大半径的时间，越大越长"
                         :max-width="200" placement="left">
                  <InputNumber size="small" :max="10" :min="0" :step="0.1" v-model="circleLayerOption.duration"></InputNumber>
                </Tooltip>
              </FormItem>
              <FormItem label="扩散效果间隔时间">
                <Tooltip content="带波纹扩散效果的圆类型时，周期影响的是波纹数，越大越多;带冒泡扩散效果的圆类型时，周期是扩散最大半径到消失的时间，越大越长"
                         :max-width="200" placement="left">
                  <InputNumber size="small" :max="10" :min="0" :step="0.1" v-model="circleLayerOption.trial"></InputNumber>
                </Tooltip>
              </FormItem>
              <FormItem label="扩散效果随机开始">
                <Tooltip content="散效果的开始时间是否随机，设置为false则表现为节奏一致" :max-width="200" placement="left">
                  <i-switch v-model="circleLayerOption.random"></i-switch>
                </Tooltip>
              </FormItem>
              <FormItem label="开启点点击事件">
                <i-switch v-model="circleLayerOption.enablePicked"></i-switch>
              </FormItem>
              <FormItem label="点鼠标滑入色">
                <PnColorPicker size="small" v-model="circleLayerOption.selectedColor" alpha recommend/>
              </FormItem>
            </Form>
          </TabPane>
          <TabPane tab="main_tabs_child" label="地图配置">
            <BMapOptionConfigForm v-model="mapOption"></BMapOptionConfigForm>
          </TabPane>
        </Tabs>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="BMapCirclePointComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <BMapCustomJsDocument>
            <div slot="custom-code-item">
              <p><Tag color="primary">this.circleLayer</Tag>指向当前组件圆点图层实例</p>
            </div>
          </BMapCustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="圆点点击时运行脚本">
            <Alert style="padding: 5px;">此脚本中，使用_this指向当前组件vm实例，通过data可获取点击项数据</Alert>
            <CodeEditor v-model="circleLayerOption.circleLayerItemClickJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'BMapCirclePointCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {
        circleLayerTypes: [
          {label: '普通圆', value: 'simple'},
          {label: '带波纹扩散效果的圆', value: 'wave'},
          {label: '带冒泡扩散效果的圆', value: 'bubble'}
        ]
      }
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        mapOption: 'component.compConfigData.mapOption',
        circleLayerOption: 'component.compConfigData.circleLayerOption'

      })
    }
  }
</script>

<style scoped>

</style>
